<template>
    <view>
        <view class="cashier_box">
            <image class="cas_bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/cas_bg.png" mode="" />
            <view class="cas_con">
                <view class="cashier_type">
                    <view class="traveler_view">
                        <image class="traveler_bg left-bg" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/bg_icon_3.png" mode="" />
                        <text>散客快捷收银</text>
                    </view>
                    <view class="vip_view" @tap="goToCard">
                        <image class="traveler_bgs" src="https://yiyue-store-applet.oss-cn-shenzhen.aliyuncs.com/bg_icon_2.png" mode="" />
                        <view class="vip_view_con">
                            <text class="t_1">会员快捷收银</text>
                            <text class="t_2">点击选择会员></text>
                        </view>
                    </view>
                </view>
            </view>
        </view>

        <view class="btn_pay" @tap.stop.prevent="hindKeyboard">
            <view class="title">
                <text>金额：</text>
            </view>
            <view class="input_box" @tap.stop.prevent="showKeyboard">
                <text class="input_label" v-if="!isShow">￥</text>
                <view class="content" v-if="content.length">
                    <view :data-str-index="index + 1" @tap.stop.prevent="getStrPosition" v-for="(item, index) in content" :key="index">
                        <view class="number-block">
                            {{ item }}
                            <!-- 光标 -->
                            <view class="cursor cursor-insert" v-if="cursorIndex === index + 1"></view>
                        </view>
                    </view>
                </view>
                <view :class="'cursor ' + (isShow ? 'actives' : '')" v-if="!cursorIndex"></view>
                <view class="default-content" v-if="!content.length">{{ defaultContent }}</view>
            </view>
            <view class="width-com"></view>
            <view class="compon">
                <view :class="'keyboard ' + (keyShow && 'hind_box')">
                    <view class="key-text">商户自定义输入金额</view>
                    <view class="key-box">
                        <view class="number-box clearfix">
                            <view
                                :data-keys="item"
                                :class="'key ' + (index === 9 ? 'key-zero' : '')"
                                hover-class="number-box-hover"
                                @tap.stop.prevent="keyTap"
                                v-for="(item, index) in KeyboardKeys"
                                :key="index"
                            >
                                {{ item }}
                            </view>
                        </view>
                        <view class="btn-box">
                            <!-- 需要替换成删除icon -->
                            <view class="key" hover-class="number-box-hover" data-keys="<" @tap.stop.prevent="keyTap">X</view>
                            <view :class="'key pay_btn ' + (payMoney ? '' : 'pay-btn-display')" hover-class="pay-btn-hover" @tap.stop.prevent="handlePay">确认支付</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import calculator from '@/component/calculator/index';
// pagesc/quickpay/quickpay.js
export default {
    components: {
        calculator
    },
    data() {
        return {
            content: [],

            // 输入的金额
            payMoney: '',

            // 支付金额
            defaultContent: '请输入金额',

            // 默认内容
            KeyboardKeys: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '.', '0', ''],

            keyShow: false,

            // 是否展示键盘
            cursorIndex: '',

            // 插入光标位置
            isShow: true,

            opShow: false
        };
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {},
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {},
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {},
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {},
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {},
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {},
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {},
    methods: {
        //点击界面键盘消失
        hindKeyboard() {
            this.setData({
                keyShow: false
            });
        },

        //点击输入框，键盘显示
        showKeyboard() {
            this.setData({
                keyShow: !this.keyShow,
                isShow: !this.isShow
            });
        },

        // 获取插入光标位置
        getStrPosition(e) {
            let { strIndex } = e.currentTarget.dataset;
            this.setData({
                cursorIndex: strIndex
            });
        },

        keyTap(e) {
            let { keys } = e.currentTarget.dataset;
            let content = this.content.join('');
            let // 转为字符串
                strLen = content.length;
            let { cursorIndex } = this;
            console.log(content, 'e', e);

            switch (keys) {
                case '.':
                    if (content.indexOf('.') === -1) {
                        // 已有一个点的情况下
                        if (content.length < 1) {
                            content = '0.';
                        } else {
                            content += '.';
                        }
                    }

                    break;

                case '<':
                    if (cursorIndex > 0 && cursorIndex !== strLen) {
                        // 从插入光标开始删除元素
                        this.content.splice(cursorIndex - 1, 1);
                        content = this.content.join('');
                    } else {
                        content = content.substr(0, content.length - 1);
                    }

                    if (!strLen || cursorIndex === strLen) {
                        // 插入光标位置重置
                        this.setData({
                            cursorIndex: ''
                        });
                    } // 删除点 组件中可以用Observer监听删除点和删除0的情况

                    if (content[0] === '0' && content[1] !== '.') {
                        content = content.substr(1, content.length - 1);
                    }

                    if (content[0] === '.') {
                        content = '0' + content;
                    }

                    break;

                default: //小数点的位置
                    let spotIndex = content.indexOf('.');

                    if (content[0] === '0' && content[1] !== '.') {
                        content = content.substr(1, content.length - 1);
                    }

                    if (spotIndex === -1 || strLen - spotIndex !== 3) {
                        //小数点后只保留两位
                        content += keys;
                    }

                    break;
            }

            this.setData({
                content: content.split(''),
                // 转为数组
                payMoney: content // 支付金额
            });
        },

        handlePay() {
            let contents = this.content.join('');
            uni.navigateTo({
                url: '/pagesc/individualpay/index?contents=' + contents // success: (res) => {
                //   // 通过eventChannel向被打开页面传送数据
                //   res.eventChannel.emit('pageBEvent',{data:this.data.content})
                // },
            });
            this.setData({
                opShow: true
            });
        },

        goToCard() {
            uni.navigateTo({
                url: '/pagesc/confirmpay/confirmpay'
            });
        },

        // if (this.data.type == 3) {
        //   wx.navigateTo({
        //     url: '/pagesc/ordercashier/ordercashier?type=2&memberStatus=' + this.data.memberStatus + '&phone=' + phone + '&shopId=' + wx.getStorageSync('shopId') + '&memberList=' + memberLists + '&serviceCard=' + serviceCard + '&memberid=' + memberid,
        //   })
        goToOrdercashier() {
            uni.navigateTo({
                url: '/pagesc/ordercashier/ordercashier'
            });
        }
    }
};
</script>
<style>
page {
    background: #f1f1f1;
}
.cashier_box {
    width: 750rpx;
    height: 240rpx;
    position: relative;
}
.cas_con {
    width: 750rpx;
    height: 122rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 60rpx;
    padding-bottom: 58rpx;
}
.cashier_box_2 {
    width: 750rpx;
    height: 240rpx;
}

.vip_info {
    width: 670rpx;
    height: 140rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(242, 93, 3, 0.16);
    border-radius: 10rpx;
}
.cas_bg {
    width: 750rpx;
    height: 240rpx;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}
.cashier_type {
    width: 750rpx;
    height: 120rpx;
    display: flex;
    z-index: 999;
    justify-content: space-evenly;
    align-items: center;
}
.traveler_view {
    width: 320rpx;
    height: 120rpx;
    position: relative;
    margin-top: 15rpx;
    letter-spacing: 2rpx;
}
.traveler_view text {
    position: absolute;
    left: 107rpx;
    top: 46rpx;
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    line-height: 20rpx;
}
.vip_view {
    width: 320rpx;
    height: 120rpx;
    position: relative;
    margin-top: 15rpx;
    margin-right: 40rpx;
}
.hr_ text {
    font-size: 32rpx !important;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333 !important;
}
.vip_view_con {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    letter-spacing: 2rpx;
}
.t_1 {
    font-size: 32rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    position: absolute;
    left: 108rpx;
    top: 24rpx;
    display: flex;
    flex-wrap: nowrap;
}
.t_2 {
    font-size: 24rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #ffffff;
    position: absolute;
    left: 108rpx;
    top: 65rpx;
}
.traveler_bg {
    width: 320rpx;
    height: 121rpx;
    background: #ffffff;
    border: 2rpx solid #ffffff;
    /* box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(233,74,24,0.2); */
    opacity: 0.4;
    border-radius: 10rpx;
}
.traveler_bgs {
    width: 320rpx;
    height: 120rpx;
    background: #ffffff;
    /* box-shadow: 0px 10rpx 20rpx 0px rgba(233,74,24,0.2); */
    opacity: 0.4;
    border-radius: 10rpx;
    margin-left: 20rpx;
}

/* component/calculator/index.wxss */
/* component/calculators/index.wxss */
/* component/calculator/calculator.wxss */
.btn_pay {
    width: 750rpx;
    height: 965rpx;
    background: #ffffff;
    border-bottom: 2rpx solid #e5e5e5;
}

.title {
    padding: 30rpx 40rpx;
    font-size: 30rpx;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: #333333;
}

.page_box {
    width: 100%;
    height: 100%;
    background: #f3f7f7;
    overflow: hidden;
}

.input_view {
    width: 700rpx;
    height: 500rpx;
    background: #fff;
    margin: 25rpx auto;
    border-radius: 10rpx;
    padding: 40rpx;
    box-sizing: border-box;
}
.key-text {
    display: flex;
    justify-content: center;
    font-size: 24rpx;
    color: #999999;
    background: #fff;
    padding-bottom: 20rpx;
}

.input_box {
    display: flex;
    align-items: center;
    padding-top: 0rpx;
    height: 90rpx;
    margin-left: 40rpx;
    margin-top: -20rpx;
}

.input_label {
    font-size: 24rpx;
    margin-right: 5rpx;
}

.content {
    display: flex;
}

.number-block {
    position: relative;
}

/* 光标 */
.cursor-insert {
    position: absolute;
    top: 0rpx;
    right: -1rpx;
}

.cursor {
    width: 2rpx;
    height: 70rpx;
    top: 0rpx;
    background: #666;
    border-radius: 6rpx;
    animation: twinkling 0.9s infinite;
}
.width-com {
    height: 0;
    width: 670rpx;
    margin-left: 40rpx;
    margin-right: 40rpx;
    border-bottom: 2rpx solid #e5e5e5;
    padding-top: 5rpx;
}

.default-content {
    color: #999;
    font-size: 30rpx;
    font-family: Adobe Heiti Std R;
}
.compon {
    position: relative;
}

.keyboard {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    height: 0;
    background: #f7f7f7;
    transition: height 0.3s;
}

.hind_box {
    height: 544rpx;
}

.key-box {
    display: flex;
    padding-left: 16rpx;
    padding-bottom: 16rpx;
    padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
    padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}

.number-box {
    flex: 3;
}

.number-box .key {
    float: left;
    margin: 16rpx 16rpx 0 0;
    width: calc(100% / 3 - 16rpx);
    height: 90rpx;
    border-radius: 10rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    background-color: #fff;
}

.number-box .key.key-zero {
    width: calc((100% / 3) * 2 - 16rpx);
}

.btn-box {
    flex: 1;
}

.btn-box .key {
    margin: 16rpx 16rpx 0 0;
    height: 90rpx;
    border-radius: 10rpx;
    line-height: 90rpx;
    text-align: center;
    font-size: 40rpx;
    font-weight: bold;
    background-color: #fff;
}

.btn-box .pay_btn {
    height: 298rpx;
    line-height: 298rpx;
    font-weight: normal;
    background-color: #e94a18;
    color: #fff;
    font-size: 32rpx;
}

.actives {
    display: none;
}
</style>
